<template>
  <basic-container>
    <avue-form
      :option="option"
      v-model="obj"
    />
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        dynamic: [{
          input: 1,
        }]
      },
      option: {
        labelWidth: 110,
        column: [{
          label: '输入框',
          prop: "input1",
          span: 12,
          row: true
        },
        {
          label: '子表单',
          prop: 'dynamic',
          type: 'dynamic',
          span: 24,
          children: {
            align: 'center',
            headerAlign: 'center',
            rowAdd: (done) => {
              this.$message.success('新增回调');
              done({
                input: '默认值'
              });
            },
            rowDel: (row, done) => {
              this.$message.success('删除回调' + JSON.stringify(row));
              done();
            },
            column: [{
              label: '输入框',
              prop: "input",
              formslot: true,
            }]
          }
        },

        ]
      }
    }
  },
  methods: {
    addAll() {
      for (let i = 0; i < 10; i++) {
        this.obj.dynamic.push({
          input: 1,
          select: 1,
          radio: 1,
        })
      }
    }
  }
}
</script>
